<template>
  <div class="box">
    <i :class="weather_path_src"></i>
    <p class="boxTemperature">{{weatherData.tem}}℃</p>
    <p class="boxWeather">{{weatherData.wea}}</p>
    <p class="boxWind">{{weatherData.win}}{{weatherData.win_speed}}</p>
    <p class="boxCity">{{weatherData.city}}市</p>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'Weather',
  data(){
    return{
      weatherData:{},
      weather_path_src:'',
    }
  },
  mounted() {
    this.getWeather();
    this.timer = setInterval(() => {
      this.getWeather();
    }, 1000 * 60 * 60)	//每小时调用一次
  },
  methods: {
    getWeather() { // 第三方天气api接口
      axios.get('https://yiketianqi.com/free/day', {
        params: {
          unescape: "1",
          appid: '26148275',
          appsecret: '2id6H48Y ',
          // version: 'v91'
        }
      }).then(res => {
        if (res.data) {
          this.weatherData = res.data;
          switch (res.data.wea_img){
            case 'yun':
              this.weather_path_src = 'el-icon-cloudy-and-sunny'
                  break
            case 'yin':
              this.weather_path_src = 'el-icon-cloudy'
                  break
            case 'lei':
              this.weather_path_src = 'el-icon-lightning'
                  break
            case 'yu':
              this.weather_path_src = 'el-icon-light-rain'
                  break
            case 'qing':
              this.weather_path_src = 'el-icon-sunny'
                  break
            default:
              this.weather_path_src = 'el-icon-light-rain'
          }
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.box{
  display: flex;
  align-items: center;
  color: #fff;
  border: 1px solid orange;
  margin-top: 5px;
}
.boxTemperature{
  font-size: 18px;
}
.boxWeather{
  font-size: 18px;
  margin: 0 0 0 15px;
}
.boxWind{
  margin: 0 15px 0 8px;
  font-size: 18px;

}
.boxCity{
  font-size: 16px;
}
</style>

